<template>
    <div v-loading="loading">
        <div class="yearItem" v-for="item in datas">
            <div class="year">{{item.created}}年</div>
            <ul>
                <li v-for="subItem in item.List" class="item">
                    <i class="iconfont iconfangkuai"></i>
                    <div class="time">{{$filters.dateFormat(subItem.created)}}</div>
                    <div class="page-title" @click="detail(subItem.id)">{{subItem.title}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {getBlogsByClass} from "network/app"
    export default {
        data(){
            return{
                datas: [],
                loading: false
            }
        },
        methods: {
            loadData(id){
                this.loading = true
                getBlogsByClass(id)
                    .then(res=>{
                        let data = res.data.data
                        //按日期分解数组
                        console.log(data)
                        let dataArr = []
                        data.map(mapItem=>{
                            if(dataArr.length === 0){
                                dataArr.push({
                                    created: this.$filters.dateFormat4(mapItem.created),
                                    List: [mapItem]
                                })
                            }else{
                                let temp = dataArr.some(item=>{
                                    if(item.created === this.$filters.dateFormat4(mapItem.created)){
                                        item.List.push(mapItem)
                                        return true
                                    }
                                })
                                if(!temp){
                                    dataArr.push({
                                        created: this.$filters.dateFormat4(mapItem.created),
                                        List: [mapItem]
                                    })
                                }
                            }
                        })
                        console.log(dataArr)
                        this.datas = dataArr
                    })
                    .finally(()=>{
                        this.loading = false
                    })
            },
            detail(id){
                this.$router.push({
                    name: 'BlogDetail',
                    params: {
                        blogId: id
                    }
                })
            },
        },
        created(){
            let id = this.$route.params.class
            this.loadData(id)
        },
        beforeRouteUpdate (to, from, next){
            let id = to.params.class
            this.loadData(id)
            next()
        }
    }
</script>

<style lang="scss" scoped>
    .yearItem{
        margin-bottom: .740741rem;
        .year{
            
            font-size: .37037rem;
            font-weight: bold;
            line-height: .37037rem;
            border-bottom: 1px solid #d3d3d3;
            text-align: center;
            padding: .092593rem;
        }
        .item{
            font-size: .259259rem;
            i{
                margin-right: .185185rem;
            }
            padding: .277778rem 0;
            display: flex;
            align-items: center;
            vertical-align: middle;
            .page-title{
                height: .37037rem;
                line-height: .37037rem;
                color: #4d5156;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .page-title:hover{
                text-decoration: underline;
            }
        }
    }
</style>